<!--  -->
<template>
  <div class='outArea-page'>
    <div class="outArea-info flex-a-c">
      <van-image
        round
        width="3.4375rem"
        height="3.4375rem"
        :src="userInfo.member && userInfo.member.avatar_image"
      />
      <div class="flex info-user">
        <h3>{{userInfo.member && userInfo.member.nickname}}</h3>
      </div>
      
    </div>
    <div class="account-board">
      <div class="flex account-main">
        <div class="account flex-a-c">
          <div class="account-box">
            <h3>{{userInfo.total_price || '0.00'}}</h3>
            <p>昨日奖金池金额</p>
          </div>
          <div class="account-box">
            <h3>{{userInfo.yesterday_froze || '0.00'}}</h3>
            <p>昨日奖金冻结爱心值</p>
          </div>
        </div>
        <div class="account flex-a-c">
          <div class="account-box">
            <h3>{{userInfo.order_count || '0.00'}}</h3>
            <p>昨日总支付订单数</p>
          </div>
          <div class="account-box">
            <h3>{{userInfo.new_froze || '0.00'}}</h3>
            <p>当前冻结爱心值</p>
          </div>
        </div>
      </div>
      
      <div class="account-content">
        <van-tabs v-model="status" title-active-color="#FB6B68" title-inactive-color="#333333"  @click="ontabClick">
          <block v-for="(item,index) in tabList" :key="index" >
            <van-tab :title="item.name" :name="item.status"></van-tab>
          </block>
        </van-tabs>
        <div class="account-list" v-if="recordList.length > 0 ">
          <div class="account-box" v-for="(item,index) in recordList" :key="index">
            <div class="account-order flex-a-c flex-j-sb">
              <h3 v-if="status == 0">奖励ID：{{item.id}}</h3>
              <h3 v-if="status == 1">{{item.type_name}}</h3>
              <div class="account-status" v-if="status == 0">{{item.reward_num}}</div>
              <div class="account-status" :class="item.type == -1?'black':''" v-if="status == 1">{{item.show_change_value}}</div>
            </div>
            <div class="account-time flex-a-c flex-j-sb">
              <div>{{item.created_at}}</div>
              <div v-if="status == 0">{{item.reward_type_name}}</div>
              <div v-if="status == 1">{{item.order_sn}}</div>
            </div>
          </div>
        </div>
        <van-empty description="暂无数据" v-else />
      </div>
      <div class="mh-50"></div>
    </div>
  </div>
</template>

<script>
import onlyHappy_controller from './onlyHappy_controller';
export default onlyHappy_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .mh-50 {
    height: 3.125rem;
    clear: both;
  }
  .outArea-page {
    height: auto;
    min-height: 100vh;
    // background-image: linear-gradient(#FF8924 0%,#FF8924 7.5rem,#F7F8FB 7.5rem ,#F7F8FB 100%);var(--themeBaseColor)
    .outArea-info {
      padding:1.5rem 0.75rem;
      background-color: var(--themeBaseColor);
      .info-user {
        flex-direction: column;
        padding:0 0 0 0.375rem;
        text-align: left;
        h3 {
          font-size: 1rem;
          font-weight: bold;
          color: #FFFFFF;
        }
      }
      
    }
    .account-main {
      width:100%;
      border-radius: 0.5rem;
      background-color: #fff;
      padding:0.75rem 0;
      .account  {
        flex:1;
      }
    }
    .account-board {
      margin: 0.625rem  0.75rem 0 0.75rem;
      .account {
        
        // border-radius: 0.3125rem;
        flex-direction: column;
        &:first-child {
          border-right: 2rpx solid #E7E7E7;
        }
        // padding:1.125rem 0 1rem 0;
        .account-box {
          width:100%;
          &:first-child {
            padding:0 0 1rem 0;
          }
          
          h3 {
            font-size: 1rem;
            line-height: 1rem;
            color: #333333;
            padding:0 0 0.5rem 0;
          }
          p {
            font-size: 0.75rem;
            line-height: 0.75rem;
            color: #999999;
          }
        }
      }
      .account-content {
        margin:0.625rem 0 0 0;
        border-radius: 0.3125rem;
        background-color: #fff;
        padding: 0 0.75rem;
        .account-list {
          margin:0.4375rem 0 0 0;
          .account-box {
            padding:0.625rem 0;
            border-top: 0.0625rem solid #F2F2F2;
            &:first-child {
              border-top:none;
            }

            .account-order {
              color: #333333;
              font-size: 0.8125rem;
              padding:0 0 0.375rem 0;
            }
            .account-status {
              font-size: 0.75rem;
              color: #F20606;
            }
            .black {
              color:#333333;
            }
            .account-time {
              text-align: left;
              font-size: 0.75rem;
              // padding:0 0 0.625rem  0;
              color: #999999;
            }
          }
        }
      }
    }
  }
</style>